我們可以用陣列或者物件的形式來存放資料，並且透過 v-for 的方式將資料全部顯示出來，其中我們會使用 index 來存放資料的索引值，而物件和陣列最大的差別就在於索引值部分，陣列是用數字由 0 依序表示索引，而物件則用物件內部指定名稱表示索引。
<body>
<div id=app>
陣列資料
<ul>
<li v-for="(item,index) in dataArray">{{index}}:{{item.name}}{{item.age}}</li>
</ul>
物件資料
<ul>
<li v-for="(item,index) in dataObject">{{index}}:{{item.name}}{{item.age}}</li>
</ul>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data:{
dataArray: [
{
name: 'Leo',
age:23
},
{
name: 'Marry',
age:30
},
{
name: 'Peter',
age:34
},
],
dataObject: {
one:{
age:23
},
two:{
age:30
},
three:{
age:34
}
},
}
})
</script>
我們如果使用 v-for 來顯示陣列資料，用 li 當成顯示方式，並且在每個 li 中間加入輸入欄位，此時我們依照資料 age 的大小，分別在輸入欄位輸入數字1~3，1 表示 age 最小的，3 表示最大的。當我們在使用一個反轉陣列的方法時，會發現原本輸入數字沒有跟著資料欄位移動。這是因為 Vue 為了確保效能，會盡量避免重複渲染已經渲染好的元素，所以只有部分元素重新渲染。這時我們使用到 key 就可以使元素重新渲染，記得 key 值要找都不一樣，確保可識別唯一性，比如像是 age 資料就都是不一樣的，當我們使用 key 後在使用反轉陣列方法時，就可以發現輸入的數字也會隨著資料反轉。
<body>
<div id='app'>
<ul>
<li v-for="item in dataArray" >{{item.name}}{{item.age}} <input type="text"> </li>
</ul>
<ul>
<li v-for="(item,key) in dataArray" :key='item.age'>{{item.name}}{{item.age}} <input type="text"> </li>
</ul>
<button @click="reverse(dataArray)">反轉陣列</button>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data:{
dataArray: [
{
name: 'Leo',
age:23
},
{
name: 'Marry',
age:30
},
{
name: 'Peter',
age:34
},
]
},
methods: {
reverse:function(arr){
arr.reverse();
}
},
})
</script>
有時候我們要篩選陣列裡面的資料，這時候就可以用 js 內建處理陣列的方法 filter() 來幫助我們過濾資料，而 filter() 的特性是它會 return 後方條件為 true 的物件。範例程式是用一個 dataArray 陣列來存放我們的原始資料，用 search 來代表我們要找尋的資料，並用 v-model 將它的值和 input 輸入欄位綁在一起，而 newArr 陣列則是來放我們透過 fliter 過濾後的資料。最後我們寫一個 fil 方法，方法先宣告變數名稱 vm 為 this，接下來我們就可以透過 vm 來存取 Vue 應用中的資料，最後當 filter 函數 return 後面的條件式是 true ，也就是 search 搜尋的文字和原本資料(此時用 item 代表)的 name 一樣時( match 方法)，陣列中所屬的物件就會傳到 newArr 陣列中。
<body>
<div id='app'>
原本資料
<ul>
<li v-for="item in dataArray">{{item.name}}{{item.age}}</li>
</ul>
過濾資料
<ul>
<li v-for="item in newArr">{{item.name}}{{item.age}}</li>
</ul>
<input v-model="search">
<button @click="fil">搜尋資料</button>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data:{
dataArray: [
{
name: 'Leo',
age:23
},
{
name: 'Marry',
age:30
},
{
name: 'Peter',
age:34
},
],
search:'',
newArr:[]
},
methods: {
fil:function(){
var vm = this;
vm.newArr = vm.dataArray.filter(function(item){
return vm.search.match(item.name);
// 寫這樣 return item.name.match(vm.search) 也可以 ;
})
}
},
})
</script>
如果我們使用 v-for in 一個數字並將它綁定在 li 標籤上，li 標籤就會渲染出從1到你指定的數字到畫面上。
<body>
<div id='app'>
<ul>
<li v-for='item in 10'>{{item}}</li>
</ul>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
})
</script>
iThome鐵人賽
看影片追技術